<template>
    <orh-trees
        add="add"
        @on-add="addSilde"
        reload
        @on-reload="refresh"
        search
        :searchOption="typeliat"
        :searchOptionSelected="searchOptionSelected"
        @on-search="searchmt"
    >
        <tree-s slot="trees" @on-treeselect="onTreeselect"></tree-s>
        <Row slot="option" style="float: right;">
            <!-- <Col span="8">
                <Upload
                        :action="`api/student/v1/import`"
                        name="file"
                        :headers="headers"
                        :on-success="upload_success"
                        :format="formattype"
                        :on-progress="upload_progress"
                        :show-upload-list="false"
                >
                    <Button size="small" :loading="loadingbut" type="primary" v-button="'daoru'">导入</Button>
                </Upload>
            </Col>
            <Col span="8">
                <Button type="primary" size="small" @click="exportExcel" v-button="'daochu'">导出</Button>
            </Col> -->
            <Col span="8">
                <Select size="small" v-model="model1" style="width:200px" @on-change="pageper">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
        </Row>

        <orh-sub-table
                pages
                :pageDate="pageDate"
                @on-page-change="Information(type,$event,pageDate.per_page)"
                slot="content"
        >
            <Table
                    ref="tableExcel"
                    :data="StudentList"
                    :columns="columns1"
                    @on-selection-change="selectOne"
                    highlight-row
                    :loading="tableload"
                    slot="table"
            ></Table>
        </orh-sub-table>
        <orh-sidebar v-model="show" :title="pageTitle" cover slot="others">
            <component
                    :is="which_to_show"
                    :otherTreeEclassid="otherTreeEclassid"
                    :typeother="'all'"
                    :infoId="infoId"
                    @showParent="showParent=>show=showParent"
                    @backList="backList"
            ></component>
        </orh-sidebar>
    </orh-trees>
</template>
<script>
    export default {
        name: "studentfilesmodule-studentbasicinformation",
        components: {
            Operation: () => import("./Operation.vue").then(m => m.default || m),
            StudentBasicInformationLook: () => import("./../Public/StudentBasicInformationLook.vue").then(m => m.default || m),
            TreeS: () => import("./../Public/TreeS.vue").then(m => m.default || m),
            StudentBasicInformationExport: () => import("./StudentBasicInformationExport.vue").then(m => m.default || m),
            StudentBasicInformationImport: () => import("./StudentBasicInformationImport.vue").then(m => m.default || m),
        },
        data() {
            return {
                cityList: [
                    {
                        value: "10",
                        label: "10条/页"
                    },
                    {
                        value: "20",
                        label: "20条/页"
                    },
                    {
                        value: "30",
                        label: "30条/页"
                    },
                    {
                        value: "40",
                        label: "40条/页"
                    },
                    {
                        value: "50",
                        label: "50条/页"
                    },
                    {
                        value: "60",
                        label: "60条/页"
                    },
                    {
                        value: "70",
                        label: "70条/页"
                    },
                    {
                        value: "80",
                        label: "80条/页"
                    },
                    {
                        value: "90",
                        label: "90条/页"
                    },
                    {
                        value: "100",
                        label: "100条/页"
                    }
                ],
                model1: "10",

                searchOptionSelected: "student_name",
                typeliat: [
                    {
                        value: "student_name",
                        label: "姓名"
                    },
                    {
                        value: "idcard",
                        label: "身份证号"
                    }
                ],

                tableload: true,
                show: false,
                type: "one",
                listUrl: "api/student/information/page/getStudentByLearninfo?page=",
                delUrl: "api/student/information/delById/",

                otherTreeEclassid: null, //用于点击树形的班级后在点击添加信息后把班级和年级保存

                pageDate: {
                    total: 0,
                    current_page: 1,
                    per_page: 10
                },
                pageTitle: null, //右边页面的title

                which_to_show: "", //判断修改或添加组件显示与否
                StudentList: [], //学生变量
                infoId: null, //用于向修改页面传id值
                loadingbut: false,
                del: [], //删除
                headers: {
                    Authorization:
                        "Bearer " + (localStorage.token ? localStorage.token : "")
                },
                formattype: ["xlsx", "xls"], //上传文件类型
                columns1: [
                    {
                        title: "学号",
                        width: 180,
                        key: "student_learncode"
                    },
                    {
                        title: "姓名",
                        width: 120,
                        render: (h, params) => {
                            let sexname = params.row.student_name.zh
                                ? params.row.student_name.zh
                                : params.row.student_name.mn;
                            return h("div", sexname);
                        }
                    },
                    {
                        title: "性别",
                        width: 80,
                        render: (h, params) => {
                            let sexname = params.row.sex == '1' ? '男' : '女'
                            return h("div", sexname);
                        }
                    },
                    {
                        title: "出生年月",
                        width: 150,
                        key: "birthday"
                    },
                    {
                        title: "身份证号",
                        width: 180,
                        key: "idcard"
                    },
                    {
                        title: " "
                    },
                    {
                        title: "操作",
                        key: "operation",
                        fixed: "right",
                        width: 180,
                        align: "center",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        directives: [
                                            {
                                                name: "button",
                                                value: "look"
                                            }
                                        ],
                                        props: {
                                            type: "success",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.look(params.row.id);
                                            }
                                        }
                                    },
                                    "查看"
                                ),
                                h(
                                    "Button",
                                    {
                                        directives: [
                                            {
                                                name: "button",
                                                value: "edit"
                                            }
                                        ],
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.update(params.row.id);
                                            }
                                        }
                                    },
                                    "编辑"
                                ),
                                h(
                                    "Button",
                                    {
                                        directives: [
                                            {
                                                name: "button",
                                                value: "del"
                                            }
                                        ],
                                        props: {
                                            type: "error",
                                            size: "small"
                                        },
                                        style: {
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.del = params.row.id;
                                                this.confirm();
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ]
            };
        },
        methods: {
            /************************************************************
             *
             * 每页显示多少条
             *
             ************************************************************/
            pageper(per) {
                this.pageDate.per_page = per
                this.Information(this.type, 1, per);
            },

            /************************************************************
             *
             * 点击树
             *
             ************************************************************/
            onTreeselect(val) {
                this.otherTreeEclassid = null;
                if (val.type == "grade") {
                    // 点击的是年级
                    // this.gradeInformation(val.type_id);
                }
                if (val.type == "eclass") {
                    this.otherTreeEclassid = val.type_id;
                    // 点击的是班级
                    this.eclassInformation(val.type_id);
                }
            },

            /************************************************************
             *
             * 通过年级获取学生的数据
             *
             ************************************************************/
            gradeInformation(grade_id) {
                this.listUrl =
                    "api/student/v1/studentlearn/grade_names?grade_id=" +
                    grade_id +
                    "&page=";
                this.Information("other", 1, this.pageDate.per_page);
            },

            /************************************************************
             *
             * 班级获取学生的数据
             *
             ************************************************************/
            eclassInformation(eclass_id) {
                this.listUrl =
                    "api/student/information/getEclassByStudent?go_eclass=" +
                    eclass_id +
                    "&page=";
                this.Information("other", 1, this.pageDate.per_page);
            },

            /************************************************************
             *
             * 获取学生的数据
             *
             ************************************************************/
            Information(
                type,
                index = this.pageDate.current_page,
            ) {
                this.type = type;
                this.tableload = true;
                this.StudentList = [];
                this.$http
                    .get(this.listUrl + index + "&limit=" + this.pageDate.per_page)
                    .then(val => {
                        let str = val.data;
                        if (type == "other") {
                            this.StudentList = str;
                            // this.StudentList = str.map(item => {
                            //     return item.studentbase ? item.studentbase : null;
                            // });
                        } else {
                            this.StudentList = str;
                        }
                        this.pageDate.total = val.count;
                        // this.pageDate.per_page = val.limit;
                        this.pageDate.current_page = index;
                        this.tableload = false; //加载完数据动画结束
                    })
                    .catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.tableload = false; //加载完数据动画结束
                    });
            },

            /************************************************************
             *
             * 点击添加
             *
             ************************************************************/
            addSilde() {
                this.show = true;
                this.infoId = false;
                this.which_to_show = "Operation";
                this.pageTitle = "添加";
            },

            /************************************************************
             *
             * 点击编辑
             *
             ************************************************************/
            update(index) {
                this.infoId = index;
                this.show = true;
                this.which_to_show = "Operation";
                this.pageTitle = "修改";
            },

            /************************************************************
             *
             * 点击查看
             *
             ************************************************************/
            look(index) {
                this.show = true;
                this.infoId = index;
                this.pageTitle = "查看";
                this.which_to_show = "StudentBasicInformationLook";
            },

            /************************************************************
             *
             * 导出
             *
             ************************************************************/
            exportExcel() {
                this.show = true;
                this.pageTitle = "导出";
                this.which_to_show = "StudentBasicInformationExport";
            },

            /************************************************************
             *
             * 导入成功
             *
             ************************************************************/
            upload_success(str) {
                this.loadingbut = true;
                this.tableload = true;
                // return
                if (str.code == 200) {
                    this.Information(this.type);
                    this.$Message.success("导入成功");
                    this.loadingbut = false;
                } else {
                    this.loadingbut = false;
                    this.tableload = false;
                    this.show = true;
                    this.infoId = str.data;
                    this.pageTitle = "导入";
                    this.which_to_show = "StudentBasicInformationImport";
                }
            },
            upload_progress() {
                this.loadingbut = true;
                this.tableload = true;
            },

            /************************************************************
             *
             * 修改添加返回数据更新
             *
             ************************************************************/
            backList (obj) {
                if (obj.status === true) {
                    this.infoId = obj.user_id;
                    this.Information(this.type);
                    this.show = false;
                }
            },

            /************************************************************
             *
             * 批量删除
             *
             ************************************************************/
            selectOne(index) {
                this.del = index.map(item => item.student_base_id);
            },

            /************************************************************
             *
             * 执行删除操作
             *
             ************************************************************/
            confirm() {
                this.$Modal.confirm({
                    title: "数据删除",
                    content: "<p>您确定要删除这些数据吗?</p>",
                    onOk: () => {
                        this.tableload = true;
                        this.$http
                            .delete(`${this.delUrl}${this.del}`)
                            .then(val => {
                                this.del = [];
                                this.Information(this.type);
                                this.$Message.success(val.message);
                            })
                            .catch(err => {
                                if (err.code && err.code == 422) {
                                    this.$Message.error(err.message);
                                }
                                this.del = [];
                                this.tableload = false;
                            });
                    }
                });
            },

            /************************************************************
             *
             * 刷新数据（当前分页）
             *
             ************************************************************/
            refresh() {
                this.Information(this.type);
            },

            /************************************************************
             *
             * 搜索操作
             *
             ************************************************************/
            searchmt(str, val) {
                let name = {
                    zh: str
                }

                this.listUrl = `api/student/information/page/getStudentByLearninfo?${val}=
                ${val === 'student_name' ? JSON.stringify(name) : str}&page=`
                this.Information(this.type);
            }
        },
        mounted() {
            this.Information("one");
        }
    };
</script>


